<template>
	<view class="content">
		<view class="store-list-box">
			<!-- 活动列表 -->
			<block v-if="storeList.length>0">
			<view class="store-item-box" v-for="(item,index) in storeList" :key="item.activity_id">
				<view class="time-info-box">
					<text>{{item.date}}</text>
				</view>
				<view class="store-box">
					<view class="store-logo-box">
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="store-info-box">
						<view class="store-title-box">
							<text>{{item.title}}</text>
						</view>
						<view class="store-txt-box">
							<text>活动时间：{{item.time}}</text>
							<text>所在城市：{{item.city}}</text>
							<text v-if="item.type==1">活动类型：普通活动</text>
							<text v-if="item.type==2">活动类型：试打会活动</text>
							<view class="bottom-but-box" @click="bindGoDetails(item.activity_id)">
								<text>查看详情</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			</block>
			<!-- 无记录状态 -->
			<block v-else>
				<icon-status :imgUrl="'../../pageMember/static/icon9.png'" :statusInfo="'暂时没有活动安排'"></icon-status>
			</block>
		</view>
	</view>
</template>

<script>
	import iconStatus from '@/components/noRecordIcon/iconStatus.vue';
	export default {
		data(){
			return {
				storeList:[],//活动列表
			}
		},
		onLoad() {
			uni.showLoading({title:'加载中'})
			this.getMyactivity();
		},
		methods:{
			getMyactivity(){ //我的活动列表
				this.$u.api.MyactivityApi({}).then(res=>{
					if(res.code==1){
						console.log('我的活动：',res.data);
						this.storeList = res.data;
					}
				});
			},
			bindGoDetails(activityId){ //查看详情
				this.$gourl(`/pageIndex/latestActivity/activityDetails?activityId=${activityId}`);
			},
			goAddressSele(){ //地区选择
				this.$gourl(`../storeInfo/region`);
			}
		},
		components:{
			iconStatus
		},
		onReachBottom(){
			console.log("nihao");
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		font-family: Microsoft YaHei;
		box-sizing: border-box;
		.store-list-box{
			padding-left: 20rpx;
			.store-item-box{
				padding: 40rpx 20rpx 40rpx 0;
				border-bottom: 1rpx solid #EDEDED;
				.time-info-box{
					font-size: 26rpx;font-weight: 400;
					color: #666666;
					padding-bottom: 20rpx;
				}
				.store-box{
					display: flex;
					.store-logo-box{
						flex: 0.36;
						line-height: 0;
						image{width: 220rpx;height: 220rpx;border-radius: 10rpx;}
					}
					.store-info-box{
						flex: 0.7;
						display: flex;flex-direction: column;
						.store-title-box{font-size: 30rpx;font-weight: bold;color: #212121;margin-bottom: 20rpx;}
						.store-txt-box{
							font-size: 26rpx;
							font-weight: 400;
							color: #666666;
							display: flex;flex-direction: column;
							text{margin-bottom: 20rpx;}
							.bottom-but-box{
								width: 50%;
								background: #000;
								padding: 15rpx 0;
								font-size: 30rpx;font-weight: 400;
								color: #FFFFFF;
								text-align: center;
								border-radius: 10rpx;
								text{margin-bottom: 0;}
							}
						}
					}
				}
			}
		}
	}
</style>